//主界面按钮
.btn {
  padding: 0 16px;
  height: 36px;
  line-height: 1;
  border-radius: 4px;
  vertical-align: middle;
  border: 1px solid transparent;
  font-size: 14px;
  word-break: break-word;
  white-space: normal;
  cursor: pointer;
  outline: 0;

  &:disabled {
    cursor: not-allowed;
  }

  .iconfont {
    margin-right: 4px;
    font-size: 16px;
    vertical-align: middle;
    color: var(--main-btn-query-icon-color);

    &:last-child {
      margin: 0;
    }
  }
  span {
    vertical-align: middle;
  }
}
//查询按钮
.btn-query {
  background: var(--main-btn-query-bg-color);
  border-color: var(--main-btn-query-border-color);
  color: var(--main-btn-query-color);

  &:hover {
    background: var(--main-btn-query-hover-bg-color);
    border-color: var(--main-btn-query-hover-border-color);
    color: var(--main-btn-query-hover-color);

    .iconfont {
      color: var(--main-btn-query-hover-icon-color);
    }
  }
  &:active {
    background: var(--main-btn-query-active-bg-color);
    border-color: var(--main-btn-query-active-border-color);
    color: var(--main-btn-query-active-color);

    .iconfont {
      color: var(--main-btn-query-active-icon-color);
    }
  }
  &:disabled {
    background: var(--main-btn-query-disabled-bg-color);
    border-color: var(--main-btn-query-disabled-border-color);
    color: var(--main-btn-query-disabled-color);

    .iconfont {
      color: var(--main-btn-query-disabled-icon-color);
    }
  }
}
.btn-normal {
  padding: 0 16px;
  background: var(--main-btn-normal-bg-color);
  border-color: var(--main-btn-normal-border-color);
  color: var(--main-btn-normal-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-normal-hover-bg-color);
    border-color: var(--main-btn-normal-hover-border-color);
    color: var(--main-btn-normal-hover-color);
  }
  &:active {
    background: var(--main-btn-normal-active-bg-color);
    border-color: var(--main-btn-normal-active-border-color);
    color: var(--main-btn-normal-active-color);
  }
  &:disabled {
    background: var(--main-btn-normal-disabled-bg-color);
    border-color: var(--main-btn-normal-disabled-border-color);
    color: var(--main-btn-normal-disabled-color);
  }
}
.btn-primary {
  padding: 0 16px;
  background: var(--main-btn-primary-bg-color);
  border-color: var(--main-btn-primary-border-color);
  color: var(--main-btn-primary-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-primary-hover-bg-color);
    border-color: var(--main-btn-primary-hover-border-color);
    color: var(--main-btn-primary-hover-color);
  }
  &:active {
    background: var(--main-btn-primary-active-bg-color);
    border-color: var(--main-btn-primary-active-border-color);
    color: var(--main-btn-primary-active-color);
  }
  &:disabled {
    background: var(--main-btn-primary-disabled-bg-color);
    border-color: var(--main-btn-primary-disabled-border-color);
    color: var(--main-btn-primary-disabled-color);
  }
}
.btn-success {
  padding: 0 16px;
  background: var(--main-btn-success-bg-color);
  border-color: var(--main-btn-success-border-color);
  color: var(--main-btn-success-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-success-hover-bg-color);
    border-color: var(--main-btn-success-hover-border-color);
    color: var(--main-btn-success-hover-color);
  }
  &:active {
    background: var(--main-btn-success-active-bg-color);
    border-color: var(--main-btn-success-active-border-color);
    color: var(--main-btn-success-active-color);
  }
  &:disabled {
    background: var(--main-btn-success-disabled-bg-color);
    border-color: var(--main-btn-success-disabled-border-color);
    color: var(--main-btn-success-disabled-color);
  }
}
.btn-warning {
  padding: 0 16px;
  background: var(--main-btn-warning-bg-color);
  border-color: var(--main-btn-warning-border-color);
  color: var(--main-btn-warning-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-warning-hover-bg-color);
    border-color: var(--main-btn-warning-hover-border-color);
    color: var(--main-btn-warning-hover-color);
  }
  &:active {
    background: var(--main-btn-warning-active-bg-color);
    border-color: var(--main-btn-warning-active-border-color);
    color: var(--main-btn-warning-active-color);
  }
  &:disabled {
    background: var(--main-btn-warning-disabled-bg-color);
    border-color: var(--main-btn-warning-disabled-border-color);
    color: var(--main-btn-warning-disabled-color);
  }
}
.btn-danger {
  padding: 0 16px;
  background: var(--main-btn-danger-bg-color);
  border-color: var(--main-btn-danger-border-color);
  color: var(--main-btn-danger-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-danger-hover-bg-color);
    border-color: var(--main-btn-danger-hover-border-color);
    color: var(--main-btn-danger-hover-color);
  }
  &:active {
    background: var(--main-btn-danger-active-bg-color);
    border-color: var(--main-btn-danger-active-border-color);
    color: var(--main-btn-danger-active-color);
  }
  &:disabled {
    background: var(--main-btn-danger-disabled-bg-color);
    border-color: var(--main-btn-danger-disabled-border-color);
    color: var(--main-btn-danger-disabled-color);
  }
}
.btn-info {
  padding: 0 8px;
  height: 36px;
  background-color: var(--main-btn-info-bg-color);
  color: var(--main-btn-info-color);
  border: 0;

  .iconfont {
    margin: 0;
    font-size: 20px;
  }
}
//操作按钮
.btn-weak {
  background: var(--main-btn-weak-bg-color);
  border-color: var(--main-btn-weak-border-color);
  color: var(--main-btn-weak-color);
  max-width: 90px;

  &:hover {
    background: var(--main-btn-weak-hover-bg-color);
    border-color: var(--main-btn-weak-hover-border-color);
    color: var(--main-btn-weak-hover-color);
  }
  &:active {
    background: var(--main-btn-weak-active-bg-color);
    border-color: var(--main-btn-weak-active-border-color);
    color: var(--main-btn-weak-active-color);
  }
  &:disabled {
    background: var(--main-btn-weak-disabled-bg-color);
    border-color: var(--main-btn-weak-disabled-border-color);
    color: var(--main-btn-weak-disabled-color);
  }
}
.btn-common {
  background: var(--main-btn-common-bg-color);
  border-color: var(--main-btn-common-border-color);
  color: var(--main-btn-common-color);

  &:hover {
    background: var(--main-btn-common-hover-bg-color);
    border-color: var(--main-btn-common-hover-border-color);
    color: var(--main-btn-common-hover-color);

    .iconfont {
      color: var(--main-btn-common-hover-icon-color);
    }
  }
  &:active {
    background: var(--main-btn-common-active-bg-color);
    border-color: var(--main-btn-common-active-border-color);
    color: var(--main-btn-common-active-color);

    .iconfont {
      color: var(--main-btn-common-active-icon-color);
    }
  }
  &:disabled {
    background: var(--main-btn-common-disabled-bg-color);
    border-color: var(--main-btn-common-disabled-border-color);
    color: var(--main-btn-common-disabled-color);

    .iconfont {
      color: var(--main-btn-common-disabled-icon-color);
    }
  }
}
.btn-normal-o {
  background: var(--main-btn-normal-o-bg-color);
  border-color: var(--main-btn-normal-o-border-color);
  color: var(--main-btn-normal-o-color);
  max-width: 327px;

  &:hover {
    background: rgba($color: var(--main-btn-normal-o-bg-color), $alpha: 0.05);
    border-color: var(--main-btn-normal-o-hover-border-color);
    color: var(--main-btn-normal-o-hover-color);

    .iconfont {
      color: var(--main-btn-normal-o-hover-icon-color);
    }
  }
  &:disabled {
    background: var(--main-btn-normal-o-disabled-bg-color);
    border-color: var(--main-btn-normal-o-disabled-border-color);
    color: var(--main-btn-normal-o-disabled-color);

    .iconfont {
      color: var(--main-btn-normal-o-disabled-icon-color);
    }
  }
}
.btn-warning-o {
  background: var(--main-btn-warning-o-bg-color);
  border-color: var(--main-btn-warning-o-border-color);
  color: var(--main-btn-warning-o-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-warning-o-hover-bg-color);
    border-color: var(--main-btn-warning-o-hover-border-color);
    color: var(--main-btn-warning-o-hover-color);

    .iconfont {
      color: var(--main-btn-warning-o-hover-icon-color);
    }
  }
  &:disabled {
    background: var(--main-btn-warning-o-disabled-bg-color);
    border-color: var(--main-btn-warning-o-disabled-border-color);
    color: var(--main-btn-warning-o-disabled-color);

    .iconfont {
      color: var(--main-btn-warning-o-disabled-icon-color);
    }
  }
}
.btn-success-o {
  background: var(--main-btn-success-o-bg-color);
  border-color: var(--main-btn-success-o-border-color);
  color: var(--main-btn-success-o-color);
  max-width: 327px;

  &:hover {
    background: var(--main-btn-success-o-hover-bg-color);
    border-color: var(--main-btn-success-o-hover-border-color);
    color: var(--main-btn-success-o-hover-color);

    .iconfont {
      color: var(--main-btn-success-o-hover-icon-color);
    }
  }
  &:disabled {
    background: var(--main-btn-success-o-disabled-bg-color);
    border-color: var(--main-btn-success-o-disabled-border-color);
    color: var(--main-btn-success-o-disabled-color);

    .iconfont {
      color: var(--main-btn-success-o-disabled-icon-color);
    }
  }
}
.btn-other {
  height: 44px;
  border-radius: 0;
  padding: 0 10px;
  background: var(--main-btn-other-bg-color);
  border: 0;
  color: var(--main-btn-other-color);

  .iconfont {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--main-btn-other-color);
  }

  &:hover {
    background: var(--main-btn-other-hover-bg-color);
    border: 0;
    color: var(--main-btn-other-hover-color);
    .iconfont {
      color: var(--main-btn-other-hover-color);
    }
  }
  &:active {
    background: var(--main-btn-other-active-bg-color);
    border: 0;
    color: var(--main-btn-other-active-color);
    .iconfont {
      color: var(--main-btn-other-active-color);
    }
  }
  &:disabled {
    background: var(--main-btn-other-disabled-bg-color);
    border: 0;
    color: var(--main-btn-other-disabled-color);
    .iconfont {
      color: var(--main-btn-other-disabled-color);
    }
  }
}
.btn-opt {
  padding: 0 10px;
  background: var(--main-btn-opt-bg-color);
  border-color: var(--main-btn-opt-border-color);
  color: var(--main-btn-opt-color);
  max-width: 198px;

  .iconfont {
    color: var(--main-btn-opt-icon-color);
  }

  &:hover {
    background: var(--main-btn-opt-hover-bg-color);
    border-color: var(--main-btn-opt-hover-border-color);
    color: var(--main-btn-opt-hover-color);

    .iconfont {
      color: var(--main-btn-opt-hover-icon-color);
    }
  }
  &:active {
    background: var(--main-btn-opt-active-bg-color);
    border-color: var(--main-btn-opt-active-border-color);
    color: var(--main-btn-opt-active-color);

    .iconfont {
      color: var(--main-btn-opt-active-icon-color);
    }
  }
  &:disabled {
    background: var(--main-btn-opt-disabled-bg-color);
    border-color: var(--main-btn-opt-disabled-border-color);
    color: var(--main-btn-opt-disabled-color);

    .iconfont {
      color: var(--main-btn-opt-disabled-icon-color);
    }
  }
}
//操作按钮
.btn-icon {
  height: 36px;
  padding: 0 7px;
  background: var(--main-btn-icon-bg-color);
  border-color: var(--main-btn-icon-border-color);
  color: var(--main-btn-icon-color);

  .iconfont {
    margin: 0;
    font-size: 20px;
    color: var(--main-btn-icon-color);
  }

  span {
    margin-left: 4px;
  }

  &:hover {
    background: var(--main-btn-icon-hover-bg-color);
    border-color: var(--main-btn-icon-hover-border-color);
    color: var(--main-btn-icon-hover-color);

    .iconfont {
      color: var(--main-btn-icon-hover-color);
    }
  }
  &:active {
    background: var(--main-btn-icon-active-bg-color);
    border-color: var(--main-btn-icon-active-border-color);
    color: var(--main-btn-icon-active-color);
    .iconfont {
      color: var(--main-btn-icon-active-color);
    }
  }
  &:disabled {
    background: var(--main-btn-icon-disabled-bg-color);
    border-color: var(--main-btn-icon-disabled-border-color);
    color: var(--main-btn-icon-disabled-color);
    .iconfont {
      color: var(--main-btn-icon-disabled-color);
    }
  }
}

.btn-full-line {
  width: 100%;
  max-width: unset;
}

.v-rotate {
  transform: rotate(0);
  transition: all 0.2s ease;
  transform-origin: center center;

  &:hover {
    transform: rotate(360deg);
  }
}

//文字按钮
.input-group {
  display: flex;
  height: 36px;
  line-height: 36px;
  border: 1px solid var(--input-group-border-color);
  border-radius: 4px;
  overflow: hidden;

  input {
    flex: 1;
    padding: 0 10px;
    border: 0;
    background-color: transparent;
    color: var(--input-group-input-color);
    background-color: var(--input-group-input-bg-color);
    outline: none;

    &::placeholder {
      color: var(--input-group-input-placeholder-color);
    }
    &:disabled {
      color: var(--input-group-input-disabled-color);
      background-color: var(--input-group-input-disabled-bg-color);

      &::placeholder {
        color: var(--input-group-input-placeholder-disabled-color);
      }
    }
  }

  .btn {
    border-radius: 0;
    border-left: 1px solid var(--input-group-border-color);
    background-color: var(--input-group-btn-bg-color);
    color: var(--input-group-btn-color);
    max-width: 176px;

    &:hover {
      background-color: var(--input-group-btn-hover-bg-color);
    }

    &:disabled {
      color: var(--input-group-btn-disabled-color);
      background-color: var(--input-group-btn-disabled-bg-color);
    }
  }
}

//弹窗按钮
.dialog {
  .btn-success {
    height: 30px;
  }

  .btn-warning {
    height: 30px;
  }

  .btn-danger {
    height: 30px;
  }
}
